<template>

  <transition name="fade">

    <div class="overlay" v-if="visible">

      <div class="modal">

        <header class="modal-header">

          <h3 class="modal-title">{{ title }}</h3>

        </header>

        <section class="modal-body">

          <slot></slot>

        </section>

        <footer class="modal-footer">

          <button class="btn btn-cancel" @click="onCancel">取消</button>

          <button class="btn btn-confirm" @click="onConfirm">确定</button>

        </footer>

      </div>

    </div>

  </transition>

</template>

<script>

export default {

  name: "Modal",

  props: {

    visible: {

      type: Boolean,

      default: false,

    },

    title: {

      type: String,

      default: "提示",

    },

  },

  emits: ["confirm", "cancel"],

  methods: {

    onConfirm() {

      this.$emit("confirm");

    },

    onCancel() {

      this.$emit("cancel");

    },

  },

};

</script>

<style scoped>

:root {


}

/* overlay 部分：半透明背景并模糊 */

.overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(8px);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 10000;

}

/* Modal 主体：柔和渐变背景、圆角和阴影 */

.modal {

  background: linear-gradient(135deg, #ffe1e1, #e1f3ff);

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

  width: 90%;

  max-width: 400px;

  animation: slideIn 0.3s ease-out;

}

.modal-header {

  background:  linear-gradient(200deg,var( --primary-color-first), var(--primary-color-second));

  padding: 16px;

  text-align: center;

}

.modal-title {

  margin: 0;

  color: #fff;

  font-size: 20px;

  font-weight: 600;

}

.modal-body {

  padding: 20px;

  text-align: center;

  color: #555;

  font-size: 16px;

  line-height: 1.4;

}

.modal-footer {

  padding: 12px 16px;

  display: flex;

  justify-content: space-around;

  border-top: 1px solid #eee;

}

/* 按钮基础样式 */

.btn {

  padding: 10px 20px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-size: 16px;

}

/* 取消按钮 */

.btn-cancel {

  background: #ddd;

  color: #333;

}

/* 确认按钮：采用指定的主题色，通过 90deg 渐变且中间有明显分界 */

.btn-confirm {
  background: linear-gradient(200deg,var( --primary-color-first), var(--primary-color-second));
  color: #fff;
}

/* 渐变过渡动画 */

.fade-enter-active, .fade-leave-active {

  transition: opacity 0.8s;

}

.fade-enter-from, .fade-leave-to {

  opacity: 0;

}

/* 滑入动画 */

@keyframes slideIn {

  from {

    transform: translateY(-20px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}

</style>